{% extends("common/base.html")%}
{% block title %} 权限管理系统 {% endblock %}
{% block head %}
<style>
    html,
    body {
        background-color: #F1F1F1;
        margin: 0;
        padding: 0;
    }

    .layui-fluid {
        padding: 15px;
    }
</style>
{% endblock %}

{% block body %}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" style="padding-top: 20px;" data-url="{{url_for('admin.add')}}" method="post">
                {{form.csrf_token}}
                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: #f00;">*</span> 角色：</label>
                    <div class="layui-input-block">
                        <select name="role_id" lay-verify="required"
                            lay-reqtext="请选择角色">
                            <option value="">请选择角色</option>
                            {% for role in roles %}
                            <option value="{{role.id}}">{{role.name}}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: #f00;">*</span> 用户名：</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" autocomplete="off"
                            placeholder="请输入用户名" class="layui-input" value=""
                            lay-verify="required|isExist" lay-reqtext="用户名必填">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: #f00;">*</span> 密码：</label>
                    <div class="layui-input-block">
                        <input type="text" name="password" lay-verify="required|pass"
                            lay-reqtext="密码必填" placeholder="" autocomplete="off"
                            class="layui-input" value="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: #f00;">*</span> 确认密码：</label>
                    <div class="layui-input-block">
                        <input type="text" name="rpassword" lay-verify="required|confirmPass"
                            lay-reqtext="请再次输入密码" placeholder=""
                            autocomplete="off" class="layui-input" value="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">状态：</label>
                    <div class="layui-input-block">
                        <input type="radio" name="status" value="1" title="启动" checked>
                        <input type="radio" name="status" value="0" title="停止">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="siteInfo">立即提交
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    layui.use(['form', 'element'], function () {
        let form = layui.form;
        form.verify({
            confirmPass: function (value) {
                let password = $('input[name="password"]').val();
                if (password != value) {
                    return "两次输入密码不一致";
                }
            }, pass: [
                /^[\S]{5,12}$/
                , "密码必须在5到12位数"
            ],
            isExist: function (value) {
                let data, msg;
                $.ajax({
                    url: "{{url_for('admin.check')}}",
                    type: "get",
                    dataType: 'json',
                    async: false,
                    data: { name: value },
                    success: function (result) {
                        data = result.code;
                        msg = result.msg;
                    },
                });
                if (data) {
                    return msg;
                }
            }
        });
        form.on('submit(siteInfo)', function (data) {
            doAjaxSubmit($('.layui-form'));
            return false;
        });

    });
</script>
{% endblock %}